import React, { useState } from 'react';

import { useAppSelector, useAppDispatch } from '@store/hooks';

import { decrement, increment, incrementByAmount } from '@store/reducers/counterSlice';

function Counter() {
    // The `state` arg is correctly typed as `RootState` already
    const count = useAppSelector((state) => state.counter.value);
    const dispatch = useAppDispatch();
    return (
        <div>
            <div>
                <button aria-label="Increment value" onClick={() => dispatch(increment())}>
                    Increment
                </button>
                <span>{count}</span>
                <button aria-label="Decrement value" onClick={() => dispatch(decrement())}>
                    Decrement
                </button>
                <button aria-label="Decrement value" onClick={() => dispatch(incrementByAmount(3))}>
                    Decrement3
                </button>
            </div>
        </div>
    );
}
export default Counter;
